<template>
  <view class="coupon">
    <view class="nav">
      <u-tabs
        :list="tabList"
        :is-scroll="false"
        :current="current"
        @change="tabChange"
        class="nav_box"
        active-color="#A084F0"
        inactive-color="#939393"
        bg-color="#f2f2f2"
        font-size="30"
        :active-item-style="activeItemStyle"
      ></u-tabs>
    </view>
    <view class="top_img">
      <img
        :src="
          $IMG_URL + '/uploads/20230519/518fe23c0fcb62d0ddea76579ab3edac.png'
        "
        mode="widthFix"
      />
    </view>
    <scroll-view class="content-list" scroll-y @scrolltolower="loadMore">
      <view class="contain">
        <shopro-coupon
          :btn="item.use_status == 0 ? 'toUse' : ''"
          :bqStatus="
            item.use_status == 1
              ? 'hadUsed'
              : item.use_status == 2
              ? 'hadExpired'
              : ''
          "
          :bgcolor="
            item.use_status == 0
              ? 'red'
              : item.use_status == 1
              ? 'purple'
              : 'gray'
          "
          :amount="item.amount"
          :enough="item.enough"
          :name="item.name"
          :usetimeend_text="item.usetimeend_text"
          :description="item.description"
          :effect_type="item.effect_type"
          v-for="(item, index) in couponList"
          :key="index"
          @useCoupon="useCoupon"
        ></shopro-coupon>
      </view>
    </scroll-view>
    <!-- 缺省页 -->
    <shopro-empty
      v-if="isEmpty"
      :image="
        $IMG_URL + '/uploads/20230527/c6247024a917a3167c464ba28bb1c428.png'
      "
      tipText="暂无优惠券~"
    ></shopro-empty>
  </view>
</template>
<script>
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {
      tabList: [
        {
          name: '未使用',
        },
        {
          name: '已使用',
        },
        {
          name: '已过期',
        },
      ],
      current: 0,
      activeItemStyle: {
        transform: 'scale(1.1)',
      },
      couponList: [],
      isEmpty: false,
      page: 1,
      rows: 10,
      use_status: 0,
      finish: false,
    };
  },
  // 计算属性 适配者模式
  computed: {
    bgcolor() {
      return 'purple';
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {
    this.getCouponList();
  },
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    //tab栏转换
    tabChange(index) {
      this.current = index;
      this.use_status = index;
      this.page = 1;
      this.couponList = [];
      this.finish = false;
      this.getCouponList();
    },
    //优惠券列表
    getCouponList() {
      this.$http(
        'v1.getCouponList',
        {
          page: this.page,
          rows: this.rows,
          use_status: this.use_status,
        },
        '请稍等'
      ).then((res) => {
        if (res.code === 1) {
          this.couponList = [...this.couponList, ...res.data.list];
          this.finish = res.data.list.length < this.rows ? true : false;
        }
      });
    },
    // 使用优惠券跳转主页
    useCoupon() {
      uni.switchTab({
        url: 'pages/index/index',
      });
    },
    //加载更多
    loadMore() {
      if (this.finish) return;
      this.page += 1;
      this.getCouponList();
    },
  },
};
</script>
<style lang="scss" scoped>
.coupon {
  height: 100%;
  background: #f2f2f2;
  padding: 0 15rpx;
  .nav {
    padding: 0 15rpx;
  }
  .top_img {
    width: 100%;
    margin-top: 20rpx;
    img {
      width: 100%;
    }
  }
  .content-list {
    width: 100%;
    height: calc(100% - 218rpx);
    margin-left: 20rpx;
    margin-top: -34rpx;
    .contain {
      position: relative;
      width: 678rpx;
      min-height: 100rpx;
      // max-height: calc(100vh - 182rpx);
      background: #ffffff;
      border-radius: 2rpx 2rpx 20rpx 20rpx;
      padding: 44rpx 20rpx 10rpx;
      // overflow: auto;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 2rpx 2rpx 0 0;
        background-image: linear-gradient(180deg, #ea666f, transparent);
        width: 100%;
        height: 10rpx;
      }
    }
  }
}
</style>
